import React, { Component } from 'react';
import service from '../api'
import { IndexBar, List } from 'antd-mobile'
import eventBus from '../utils/eventBus';
class City extends Component<any, any> {
    constructor(props: any) {
        super(props)
        this.state = {
            sortCity: [],
            city:{}
        }
    }
    componentDidMount(): void {
        service.city.getsortCity().then(res => {
            // console.log(res);
            this.setState({
                sortCity: res.data,
                
            })
        })
    }
  async  sendCity(city: any) {
      await  this.setState({
            city
        })
        console.log(this.state.city)
        eventBus.emit('city',this.state.city)
        localStorage.setItem('city',JSON.stringify(city))
        setTimeout(()=>{
            this.props.history.push('/index/home')
        },500)
    }
    render() {
        return (
            <div className='city'>
                <div style={{ height: window.innerHeight }}>
                    <IndexBar>
                        {this.state.sortCity.map((group: any) => {
                            const { letter, data } = group
                            return (
                                <IndexBar.Panel
                                    index={letter}
                                    title={`标题${letter}`}
                                    key={`标题${letter}`}
                                >
                                    <List>
                                        {data.map((item: any, index: number) => (
                                            <List.Item onClick={() => {this.sendCity(item) }} key={index}>{item.name}</List.Item>
                                        ))}
                                    </List>
                                </IndexBar.Panel>
                            )
                        })}
                    </IndexBar>
                </div>
            </div>
        );
    }
}

export default City;